<template>
	<view>
		<!-- 顶部选项卡 -->
		<!-- scroll-row宽度100% 不要换行 -->
		<scroll-view 
		scroll-x 
		class="scroll-row" 
		:scroll-into-view='scrollInto' 
		scroll-with-animation style="height: 100rpx;"
		>
			<view 
			v-for="(item,index) in tabBars" 
			:key="index" 
			class="scroll-row-item px-3 py-2 font-md"
			:id="'tab'+index"
			:class="tabIndex === index ? 'text-main font-weight-bold':''"
			@click="changeTab(index)">
				{{item.classname}}
			</view>
		</scroll-view>
		
		<swiper 
		:duration="150" 
		:current="tabIndex" 
		@change="onChange"
		:style="'height:' +scrollH+'px'"
		>
			<swiper-item
			v-for="(item,index) in newsList"
			:key="index">
				<scroll-view 
				scroll-y="true" 
				:style="'height:' +scrollH+'px'"
				@scrolltolower="loadmore(index)"
				>
					<!-- 先看数组是否有内容 -->
					<template v-if="item.list.length">
						<!-- 文章列表 -->
						<block v-for="(item2,index2) in item.list" :key="index2">
							<topicList
							:item="item2"
							:index="index2"></topicList>
						</block>
						<!-- 上拉加载更多 -->
						<loadMore :loadmore='item.loadmore'></loadMore>
					</template>
					<!-- 刚开始加载的显示内容 -->
					<template v-else-if="!item.firstLoad">
						<view class="flex align-center justify-center font-lg text-secondary" style="height: 500rpx;">
							加载中...
						</view>
					</template>
					<!-- 否则显示无内容画面 -->
					<template v-else>
						<nothing></nothing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	import topicList from '@/components/news/topicList.vue';
	import loadMore from '@/components/common/loadmore.vue';
	import nothing from '@/components/common/nothing.vue';
	export default {
		components:{topicList, loadMore, nothing},
		data() {
			return {
				newsList: [],
				scrollH: 600,
				// 顶部选项卡
				scrollInto:'',
				// 顶部选项卡激活序号
				tabIndex: 0,
				// 顶部选项卡元素
				tabBars:[],
				
			}
		},
		// 监听点击导航栏搜索框
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search',
			});
		},
		// 点击编辑发布页
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'../addInput/addInput'
			})
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(100)
				}
			}),
			this.loadList()
		},
		methods: {
			// 将单列数据循环 让每个顶部选项卡都有对应的数据
			loadList() {
				// 获取分类
				this.$H.get('/topicclass').then(res => {
					this.tabBars = res.list
					let arr = []
					for(let i = 0; i < this.tabBars.length; i++) {
						arr.push({
							// 上拉加载更多
							loadmore:'上拉加载更多',
							// 文章列表元素
							list:[],
							page:1,
							firstLoad:false
						})
					}
					this.newsList = arr
					// 获取第一个分类的数据
					if (this.tabBars.length) {
						this.getList()
					}
				})
				
			},
			// 获取指定列表下的文章数据
			getList() {
				let index = this.tabIndex
				let id = this.tabBars[index].id
				let page = this.newsList[index].page
				let isfresh = this.page === 1
				this.$H.get('/topicclass/' + id + '/topic/' + page).then(res => {
					let list = res.list.map(v => {
						// 目的是让后台的数据与之前的数据名称一致
						return {
							cover:v.titlepic,
							title:v.title,
							desc:v.desc,
							today_count:v.todaypost_count,
							news_count:v.post_count
						}
					})
					// 如果是第一页 直接赋值  如果不是  需要将所有数据一起赋值
					this.newsList[index].list = isfresh ? [...list] : [...this.newsList[index].list, ...list],
					// 数据小于10条 后面就没有数据了
					this.newsList[index].loadmore = list.length < 10 ? '没有更多了' : '上拉加载更多'
					if (isfresh) {
						this.newsList[index].firstLoad = true
					}
				}).catch(err => {
					if (!isfresh) {
						page--
					}
				})
			},
			// 点击tab栏
			changeTab(index) {
				if (index === this.tabIndex) {
					return
				} else {
					this.tabIndex = index
					// scrollInto要和前面定义的id一致 滚动到指定元素
					this.scrollInto = 'tab' + index
					// 获取当前分类下的列表数据
					if (!this.newsList[this.tabIndex].firstLoad) {
						this.getList()
					}
				}
			},
			// 监听滑动
			onChange(e) {
				// 与顶部选项卡关联
				this.tabIndex = e.detail.current
				if (this.newsList[this.tabIndex].list.length) return
				this.getList()
			},
			// 加载更多 模拟获取后台数据
			loadmore(index) {
				let item = this.newsList[index]
				// 判断是否处于可加载状态
				if (item.loadmore !== '上拉加载更多') return
				item.loadmore = '加载中'
				item.page++
				this.getList()
				
			}
		}
	}
</script>

<style>

</style>
